<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Circles</title>
    
    <!-- Bootstrap core CSS -->
    <link href="/resources/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="/resources/css/jquery.minicolors.css">
    <style type="text/css">
    	body { 
			padding-top: 50px;
			padding-bottom: 70px;
			background-color: #f6f7f7;
		}
		.commonFont{
    		font-family: 'Nanum Gothic', sans-serif;
    	}
    	@media screen and (max-width: 767px){ .conWidth{width:100%;}}
    	@media screen and (min-width: 768px){ .conWidth{width:75%;}}
    	@media screen and (min-width: 1100px){ .conWidth{width:65%;}}
    	@media screen and (min-width: 1300px){ .conWidth{width:55%;}}
    	@media screen and (min-width: 1500px){ .conWidth{width:50%;}}
    	@media screen and (min-width: 1700px){ .conWidth{width:40%;}}
    	
    	@media screen and (max-width: 991px){ .pull-down{margin-top:0;margin-bottom:20px;}}
    	@media screen and (min-width: 992px){ .pull-down{margin-top:30px;}}
    	
    	.popover{
    		max-width:600px;
    		display: block;
    		overflow: hidden;
    	}
    	#selectCoverImage div{
    		display:inline-block;
    		background-size:cover;
    		width:45px;
    		height:45px;
    		cursor:pointer;
    		padding-top:5px;
    		padding-left:5px;
    		overflow:hidden;
    		margin:0;
    	}
    </style>
	<script src="/resources/js/jquery-1.11.0.js"></script>
	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script src="/resources/js/jquery.minicolors.min.js"></script>
    <script type="text/javascript">
    	var check1 = false;
    	var check2 = false;
    	
    	/* 사용자 커버이미지 업로드 */
	    function UploadImage(input){
			if (input.files && input.files[0]) {
				
				if(input.value.substr(input.value.length-3) == "jpg" || input.value.substr(input.value.length-3) == "gif" || input.value.substr(input.value.length-3) == "bmp" || input.value.substr(input.value.length-3) == "png"){
					var reader = new FileReader();
	                reader.onload = function (e) {
	                    $("#uploadCoverImage").css("background-image", "url("+e.target.result+")")
	                    .data("img", e.target.result)
	                    .fadeIn();
	                    $("#selectCoverImage").find("div.img-rounded").each(function(){
	        				$(this).html("&nbsp;");
	        			});
	                    $("#uploadCoverImage").html("<i class='glyphicon glyphicon-ok' style='color:#ffffff;font-size:1.2em;'></i>");
	                    $("#InputCoverImage").val("false");
	                };
	                
	                reader.readAsDataURL(input.files[0]);
				}else{
					alert('사진만 올릴 수 있습니다');
					return false;
				}
	        }
		}
    	/* 그룹명 검증체크 */
	    function checkGroupName(value){
    		if(value == ""){
    			$("#GroupNameState").html("<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>&nbsp;&nbsp;그룹명을 입력해 주세요</span>");
		    	$("#InputGroupName").parent().removeClass().addClass("form-group has-error");
    		}else{
    			$("#GroupNameState").html("<span style='color:#5CB85C;'><i class='glyphicon glyphicon-ok'></i>&nbsp;&nbsp;좋습니다</span>");
		    	$("#InputGroupName").parent().removeClass().addClass("form-group has-success");
		    	check1 = true;
    		}
		}
    	
	 	/* 그룹주소 중복체크 */
	    function checkGroupUrl(value,event){
			if(value == ""){
				$("#GroupUrlState").html("<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>&nbsp;URL 주소를 입력해 주세요</span>");
				$("#InputGroupUrl").parent().parent().removeClass().addClass("form-group has-error");
				return false;
			}
			check = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
			if(check.test(value)){
				$("#InputGroupUrl").val("");
				return false;
			}
			
	    	$.ajax({
 			    type : "POST"
 			    , url : "checkGroupUrl?url="+value
 			    , dataType : "text"
 			    , timeout : 5000
 			    , error : function() {
 			    	
 			    }
 			    , success : function(response) {
 			    	if(response == 0){
 			    		$("#GroupUrlState").html("<span style='color:#5CB85C;'><i class='glyphicon glyphicon-ok'></i>&nbsp;&nbsp;사용 가능합니다</span>");
 			    		$("#InputGroupUrl").parent().parent().removeClass().addClass("form-group has-success");
 			    		check2 = true;
 			    	}else{
 			    		$("#GroupUrlState").html("<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>&nbsp;&nbsp;이미 사용중인 URL주소 입니다</span>");
 			    		$("#InputGroupUrl").parent().parent().removeClass().addClass("form-group has-error");
 			    		check2 = false;
 			    	}
 			    }
 			    , beforeSend: function() {
 			    	$('#loadingGroupUrl').show();
 			    	$("#GroupUrlState").hide();
 			    }
 			    , complete: function() {
 			    	$('#loadingGroupUrl').fadeOut('fast');
 			    	$("#GroupUrlState").fadeIn();
 			    }
 			});
		}
    	
	 	/* 그룹생성버튼 이벤트 처리 */
	 	function createGroup(f){
	 		if(f.InputContent.value == "" || f.theme.value == "주제선택" || f.access.value == ""){
	 			if(f.InputContent.value == "") $("#contentState").removeClass().addClass("form-group has-error");
	 			if(f.theme.value == "주제선택") $("#themeState").removeClass().addClass("form-group has-error");
	 			$("#createButton").effect("shake",{times:2},200); return false;
	 			return false;
	 		}
	 		if(check1 && check2){
	 			f.action = "/createGroupPr";
		 		f.submit();
	 		}else{
	 			$("#createButton").effect("shake",{times:2},200);
	 		}
	 		
	 	}
	 	
    	$(document).ready(function(){
    		$("#cover1\\.jpg").html("<i class='glyphicon glyphicon-ok' style='color:#ffffff;font-size:1.2em;'></i>");
    		
    		$('[data-toggle="tooltip"]').tooltip({
    		    'placement': 'top',
    		    'container': 'body',
    		    'trigger': "hover"
    		});
    		
    		$("div.img-rounded").popover({
    			content:function (){
    				return '<img src="'+$(this).data('img') + '" width="100%;" />';
    			},
    			html:true,
    			trigger:'hover',
    			placement:'bottom',
    			container: 'body'
    		});
    		
    		$("div.img-rounded").click(function(){
    			$("#selectCoverImage").find("div.img-rounded").each(function(){
    				$(this).html("&nbsp;");
    			});
    			$("#InputCoverImage").val($(this).attr("id"));
    			$(this).html("<i class='glyphicon glyphicon-ok' style='color:#ffffff;font-size:1.2em;'></i>");
    		});
    		
    		/* 대학교검색 자동완성 */
    		$("#InputCollege").focus(function(){
    			$.getScript('//code.jquery.com/ui/1.10.4/jquery-ui.js', function(){
    				$.getScript('/resources/js/availableCollege.js', function()
        					{
        				$("#InputCollege").autocomplete({
        					delay: 0,
        	    			source: availableCollege
        	    	    });
        			});
    			});
    		});
    		
    		/* 거주지 자동완성 */
    		$("#InputResidence").focus(function(){
    			$.getScript('//code.jquery.com/ui/1.10.4/jquery-ui.js', function(){
	    			$.getScript('/resources/js/availableCity.js', function()
	    					{
	    				$("#InputResidence").autocomplete({
	    					delay: 0,
	    	    			source: availableCity
	    	    	    });
	    			});
    			});
    		});
    		$('body').on('click', function (e) {
    		    $('.img-rounded').each(function () {
    		    	$(this).popover('hide');
    		    });
    		});
    		
    		$("#theme").change(function(){
    			if($(this).val() != "주제선택"){
    				$("#themeState").removeClass().addClass("form-group has-success");
    			} 
    		});
    		
    		$("#InputContent").change(function(){
    			if($(this).val() != ""){
    				$("#contentState").removeClass().addClass("form-group has-success");
    			}
    		});
    		
    		$('#InputBgColor').minicolors({
    			control: 'hue',
    			defaultValue: '#E9EAED',
    		    inline: false,
    		    position: 'bottom left',
    		    theme: 'bootstrap',
    		    change: function(hex) {
    		    	if(!hex) return;
    		    }
    		});

    	}); // end document
    	
    </script>
</head>

<body>
	<!-- Fixed navbar -->
		<jsp:include page = "head.jsp" flush="false"/>
	<!-- Fixed navbar -->

   	<div class="container conWidth">
   		<div class="well" style="background-color:#fff;margin-top:20px;">
   			<h1>그룹 만들기</h1>
   			<p class="text-muted">그룹을 만들고 멤버를 초대해 보세요</p>
   			<hr>
   			<form method="post" id="f">
   				<div class="row">
   					<div class="col-md-7">
   						<div class="form-group">
   							<label for="InputGroupName">그룹명</label>
   							<input type="text" class="form-control" id="InputGroupName" name="InputGroupName" placeholder="그룹명" onblur="checkGroupName(this.value);" maxlength="12" autofocus="autofocus" data-toggle="tooltip" title="최대 12글자까지 입력이 가능합니다">
						</div>
					</div>
					<div class="col-md-5">
						<div class="pull-down">
							<span id="loadingGroupName" style="display:none;"><img src="/resources/img/ajax-loader.gif" /></span>
							<span id="GroupNameState"></span>
						</div>
					</div>
				</div><!-- end row -->
   				<div class="row">
   					<div class="col-md-7">
	    				<div class="form-group">
	    					<label for="InputGroupUrl">URL주소 <abbr title="입력한 주소로 URL주소가 생성되며, 생성된 주소로 직접 접속이 가능합니다."><i class="glyphicon glyphicon-question-sign" style="color:#808080;"></i></abbr></label>
	    					<div class="input-group">
	    						<span class="input-group-addon">circles.com/</span>
								<input type="text" class="form-control" id="InputGroupUrl" name="InputGroupUrl" placeholder="주소명" onkeyup="checkGroupUrl(this.value,event);" maxlength="20" data-toggle="tooltip" title="영문과 숫자만 가능합니다" style="ime-mode:disabled!important">
							</div>
						</div>
					</div>
					<div class="col-md-5">
						<div class="pull-down">
							<span id="loadingGroupUrl" style="display:none;"><img src="/resources/img/ajax-loader.gif" /></span>
							<span id="GroupUrlState"></span>
						</div>
					</div>
				</div><!-- end row -->
   				<div class="row">
   					<div class="col-md-12">
	    				<div class="form-group">
	    					<label>커버 이미지</label>
	    					<div id="selectCoverImage">
								<div id="cover1.jpg" style="background-image: url(/resources/img/cover-image/sample/cover1.jpg);" data-img="/resources/img/cover-image/sample/cover1.jpg" class="img-rounded"></div>
								<div id="cover2.jpg" style="background-image: url(/resources/img/cover-image/sample/cover2.jpg);" data-img="/resources/img/cover-image/sample/cover2.jpg" class="img-rounded"></div>
								<div id="cover3.jpg" style="background-image: url(/resources/img/cover-image/sample/cover3.jpg);" data-img="/resources/img/cover-image/sample/cover3.jpg" class="img-rounded"></div>
								<div id="cover4.jpg" style="background-image: url(/resources/img/cover-image/sample/cover4.jpg);" data-img="/resources/img/cover-image/sample/cover4.jpg" class="img-rounded"></div>
								<div id="uploadCoverImage" style="display:none;" class="img-rounded"></div>
								<div style="width:110px;"><button type="button" class="btn btn-info" data-toggle="tooltip" title="권장되는 이미지 사이즈는 780*260 입니다" onclick ="javascript:document.getElementById('UploadImageButton').click();">직접올리기</button></div>
							</div>
							<input type="file" id="UploadImageButton" name="UploadImageButton" value="사진" style="display: none;" onchange="UploadImage(this)" accept=".gif,.jpg,.bmp,.png">
							<input type="hidden" id="InputCoverImage" name="InputCoverImage" value="cover1.jpg">
						</div>
					</div>
				</div><!-- end row -->
				<div class="row">
   					<div class="col-md-12">
	    				<div class="form-group">
	    					<label>배경색상</label><br>
	    					<div style="width:100px;">
	    						<input type="hidden" id="InputBgColor" name="InputBgColor" class="form-control" value="#E9EAED" maxlength="7">
	    					</div>
						</div>
					</div>
				</div><!-- end row -->
				<div class="row">
   					<div class="col-md-12">
	    				<div class="form-group" id="contentState">
	    					<label for="InputContent">그룹 설명</label>
	    					<textarea id="InputContent" name="InputContent" rows="2" class="form-control" style="resize:none;" placeholder="간단한 그룹설명을 적어주세요"></textarea>
						</div>
					</div>
				</div><!-- end row -->
				<div class="row">
   					<div class="col-md-12">
	    				<div class="form-group">
	    					<label>그룹 참여권한</label><br>
	    					<div class="radio-inline">
		    					<label data-toggle="tooltip" title="모든 사용자는 그룹을 조건없이 가입할 수 있습니다."><input type="radio" name="access" id="access" value="2">모두허용</label>
							</div>
							<div class="radio-inline">
								<label data-toggle="tooltip" title="모든 사용자는 가입신청을 할 수 있으나, 매니저가 수락하거나 초대해야 합니다."><input type="radio" name="access" id="access" value="1" >선택허용</label>
							</div>
							<div class="radio-inline">
								<label data-toggle="tooltip" title="모든 사용자는 그룹에 접근할 수 없으나, 매니저가 직접 멤버를 초대할 수 있습니다."><input type="radio" name="access" id="access" value="0">비공개</label>
							</div>
						</div>
					</div>
				</div><!-- end row -->
				<hr>
				<div class="row">
   					<div class="col-md-12">
   						<div class="form-group" id="themeState">
   							<label>그룹 주제</label>
   							<div class="row">
		    					<div class="col-md-3">
									<select class="form-control" id="theme" name="theme">
										<option style="visibility:hidden;">주제선택</option>
										<option value="meeting">친목모임</option>
										<option value="family">가족모임</option>
										<option value="reunion">동창회</option>
										<option value="couple">커플</option>
										<option value="individual">개인</option>
										<option value="entertainment">엔터테인먼트</option>
										<option value="lifestyle">라이프스타일</option>
										<option value="auto">자동차</option>
										<option value="music">음악</option>
										<option value="game">게임</option>
										<option value="fashion">패션 및 뷰티</option>
										<option value="news">뉴스</option>
										<option value="sports">스포츠</option>
										<option value="art">예술/디자인</option>
										<option value="photography">사진</option>
										<option value="cook">요리</option>
										<option value="travel">여행</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div><!-- end row -->
				<div class="row">
					<div class="col-md-12">
						<div class="form-group"><label>그룹 유형</label>
							<div class="row">
	    						<div class="col-md-3">
									<div class="form-group"><input type="text" class="form-control" id="InputHighSchool" name="InputHighSchool" placeholder="고등학교"></div>
								</div>
								<div class="col-md-3">
									<div class="form-group"><input type="text" class="form-control" id="InputCollege" name="InputCollege" placeholder="대학교"></div>
								</div>
								<div class="col-md-3">
									<div class="form-group"><input type="text" class="form-control" id="InputResidence" name="InputResidence" placeholder="거주지"></div>
								</div>
								<div class="col-md-3">
									<div class="form-group"><input type="text" class="form-control" id="InputWorkplace" name="InputWorkplace" placeholder="직장"></div>
								</div>
							</div>
							<small class="text-muted"><i class="glyphicon glyphicon-exclamation-sign"></i> 해당 필드를 입력하면 다른 멤버가 그룹을 찾는데 도움이 됩니다.</small>
						</div>
					</div>

				</div><!-- end row -->
				<div id="createButton"><button type="button" class="btn btn-success btn-lg btn-block" onclick="createGroup(f);">생성하기</button></div>
	    	</form>
   		</div><!-- end well -->
   	</div><!-- end container -->
	
    <!-- footer -->
	<div class="hidden-xs">
		<jsp:include page = "footer.jsp" flush="false"/>
	</div>
	<!-- footer -->
	
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->  
    <script src="/resources/js/bootstrap.js"></script>
</body>
</html>